import React from "react";
const TableHeader = ({ columns, data, sortOrder, onSetMovies }) => {
  const handleHeader = (column) => {
    if(column.sorter) {
      let _list = data.sort(column.sorter)
      onSetMovies([..._list])
    }
  };
  return (
    <thead>
      <tr>
        {columns.map((column) => (
          <th key={column.path || column.key} onClick={() => handleHeader(column)} >
            {column.label}
            { column.sorter && sortOrder === '' && <i className="fa fa-sort" aria-hidden="true"></i> }
            { column.sorter && sortOrder === 'asc' && <i className="fa fa-sort-asc" aria-hidden="true"></i> }
            { column.sorter && sortOrder === 'desc' && <i className="fa fa-sort-desc" aria-hidden="true"></i> }
          </th>
        ))}
      </tr>
    </thead>
  );
};

export default TableHeader;
